<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import Craft from './dialog/craft/index.vue';
import Edit from './dialog/edit/index.vue';
import addDataStore from '@/store/modules/addDataStore';
import { message } from '@/components/q-message/message';
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { doGetOrderList, doUpdateOrderPriority } from '@/api/demand/order/index';
import type { OrderListRecord } from '@/api/demand/order/model/type';

defineOptions({
    name: 'OrderList'
});

const router = useRouter();

const { handleAddData } = addDataStore();

const tableRef = ref<TableRef>(); // table组件

const searchRef = ref<SearchRef>();

/**
 * @: 新增相关
 */
const handleAdd = () => {
    handleAddData('orderAddData');
    tableRef.value?.clearSelection();

    router.push('/order/add');
};

/**
 * @: 修改相关
 */
const editRef = ref<InstanceType<typeof Edit>>();
const openEdit = (row: OrderListRecord) => {
    editRef.value?.handleEdit(row);
};

/**
 * @: 查看
 */
const handleCheck = (row: OrderListRecord) => {
    editRef.value?.handleEdit(row, true);
};

/**
 * @: 表格编辑禁用函数
 */
const editDisabledFn = (row: OrderListRecord) => row.schedulingStatus !== '未排产';

/**
 * @: 工艺弹框
 */
const craftRef = ref<InstanceType<typeof Craft>>();
const checkCraft = (row: OrderListRecord) => {
    if (!row.hasProcess) return;
    craftRef.value?.open(row);
};

/**
 * @: 订单优先级
 */
const priorityChange = async (val: number, row: OrderListRecord) => {
    try {
        await doUpdateOrderPriority({ id: row.id, orderPriority: val });
        row.orderPriority = val;
        message.success('更新订单优先级成功！');
    } catch (error) {
        console.log('error');
    }
};

/**
 * @: 跳转到bom
 */
const jumpToBOM = (row: OrderListRecord) => {
    if (!row.hasBom) return;
    router.push({
        path: '/BomDetail',
        query: {
            materialCode: row.itemCode
        }
    });
};

/**
 * @: 生产映射
 */
const schedulingStatus: { [key: string]: 'error' | 'success' | 'primary' } = {
    未排产: 'error',
    已排产: 'success',
    生产中: 'primary'
};
</script>

<template>
    <q-page>
        <base-search ref="searchRef" :table-ref="tableRef" :searchConfig="searchConfig" />
        <base-table
            ref="tableRef"
            :tableConfig="tableConfig"
            :getDataFn="doGetOrderList"
            :hide-del="true"
            action-width="216"
            body-row-height="50px"
            :editDisabledFn="editDisabledFn"
            @edit="openEdit"
        >
            <template #tableHeadStart>
                <el-button type="primary" :icon="Plus" @click="handleAdd"> 新增 </el-button>
            </template>
            <!-- 订单状态 -->
            <template #schedulingStatus="{ row }: SlotData<OrderListRecord>">
                <q-status :type="schedulingStatus[row.schedulingStatus] ?? 'light'">
                    {{ row.schedulingStatus }}
                </q-status>
            </template>

            <!-- 交期差异天数 -->
            <template #deviationDays="{ row }: SlotData<OrderListRecord>">
                <q-tag :type="row.deviationDays < 0 ? 'error' : 'primary'">
                    {{ row.deviationDays ?? '--' }}
                </q-tag>
            </template>

            <!-- 订单优先级 -->
            <template #orderPriority="{ row }">
                <div>
                    <el-select
                        :disabled="row.schedulingStatus !== '未排产'"
                        :model-value="row.orderPriority"
                        @change="val => priorityChange(val, row)"
                    >
                        <el-option v-for="item in 10" :key="item" :value="item" />
                    </el-select>
                </div>
            </template>

            <!-- 查看 -->
            <template #preBtn="{ row }">
                <el-link type="primary" @click="handleCheck(row)">查看</el-link>
            </template>

            <!-- 操作项 -->
            <template #action="{ row }">
                <span class="m-l-24" @click="jumpToBOM(row)">
                    <el-tooltip v-if="!row.hasBom" content="当前订单物料未创建BOM" placement="top">
                        <el-link class="relative" type="primary" disabled>
                            BOM
                            <q-icon icon-class="a-warning1" size="13" class-name="danger" />
                        </el-link>
                    </el-tooltip>
                    <el-link v-else type="primary"> BOM </el-link>
                </span>

                <span class="m-l-24" @click="checkCraft(row)">
                    <el-tooltip
                        v-if="!row.hasProcess"
                        content="当前订单物料未创建工艺路线"
                        placement="top"
                    >
                        <el-link class="relative" type="primary" disabled>
                            工艺
                            <q-icon icon-class="a-warning1" size="13" class-name="danger" />
                        </el-link>
                    </el-tooltip>
                    <el-link v-else type="primary"> 工艺 </el-link>
                </span>
            </template>
        </base-table>

        <!-- 编辑 -->
        <edit ref="editRef" :tableRef="tableRef" />

        <!-- 工艺弹框 -->
        <craft ref="craftRef" />
    </q-page>
</template>

<style scoped lang="scss">
@include b(danger) {
    position: absolute;
    top: -1px;
    right: -8px;
}
@include b(relative) {
    position: relative;
}
</style>
